<template>
	<el-form
		label-position="left"
		label-width="80"
		:model="playerConfigStore"
		class="acf-player-cfg">
		<el-form-item label="主音量">
			<el-slider v-model="playerConfigStore.allGain" :step="0.1" :min="0" :max="2" />
		</el-form-item>
		<el-row>
			<el-col :span="11">
				<el-form-item label="左声道音量">
					<el-slider v-model="playerConfigStore.leftGain" :step="0.1" :min="0" :max="2" />
				</el-form-item>
			</el-col>
			<el-col :span="11" :offset="2">
				<el-form-item label="右声道音量">
					<el-slider v-model="playerConfigStore.rightGain" :step="0.1" :min="0" :max="2" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="11">
				<el-form-item label="低频增益">
					<el-slider v-model="playerConfigStore.bfLowGain" :step="0.1" :min="-12" :max="12" />
				</el-form-item>
			</el-col>
			<el-col :span="11" :offset="2">
				<el-form-item label="高频增益">
					<el-slider v-model="playerConfigStore.bfHighGain" :step="0.1" :min="-12" :max="12" />
				</el-form-item>
			</el-col>
			<el-col :span="11">
				<el-form-item label="中频增益">
					<el-slider v-model="playerConfigStore.bfPeakingGain" :step="0.1" :min="-12" :max="12" />
				</el-form-item>
			</el-col>
			<el-col :span="11" :offset="2">
				<el-form-item label="中频因子">
					<el-slider v-model="playerConfigStore.bfPeakingQ" :step="0.1" :min="0.1" :max="10" />
				</el-form-item>
			</el-col>
		</el-row>
		<el-form-item label="空间音">
			<el-radio-group v-model="playerConfigStore.pannerMode">
				<el-radio label="2D" name="2D" />
				<el-radio label="3D" name="3D" />
			</el-radio-group>
		</el-form-item>
		<el-form-item label="2D音" v-show="playerConfigStore.pannerMode === '2D'">
			<el-slider v-model="playerConfigStore.panner2D" :step="0.1" :min="-1" :max="1" />
		</el-form-item>
		<el-form-item label="3D音X" v-show="playerConfigStore.pannerMode === '3D'">
			<el-slider v-model="playerConfigStore.panner3DX" :min="-1000" :max="1000" />
		</el-form-item>
		<el-form-item label="3D音Y" v-show="playerConfigStore.pannerMode === '3D'">
			<el-slider v-model="playerConfigStore.panner3DY" :min="-1000" :max="1000" />
		</el-form-item>
		<el-form-item label="3D音Z" v-show="playerConfigStore.pannerMode === '3D'">
			<el-slider v-model="playerConfigStore.panner3DZ" :min="-1000" :max="1000" />
		</el-form-item>
	</el-form>
</template>

<script setup>
	
	import { ref, reactive, watch } from 'vue';
	import usePlayerConfigStore from './usePlayerConfigStore';
	import * as $audio from './audio';
	
	const playerConfigStore = usePlayerConfigStore();
	
	watch(() => playerConfigStore.allGain, (newVal) => {
		$audio.allGainNode.gain.value = newVal;
	})
	
	watch(() => playerConfigStore.leftGain, (newVal) => {
		$audio.leftGainNode.gain.value = newVal;
	})
	
	watch(() => playerConfigStore.rightGain, (newVal) => {
		$audio.rightGainNode.gain.value = newVal;
	})
	
	watch(() => playerConfigStore.bfLowGain, (newVal) => {
		$audio.bfLowNode.gain.value = newVal;
	})
	
	watch(() => playerConfigStore.bfHighGain, (newVal) => {
		$audio.bfHighNode.gain.value = newVal;
	})
	
	watch(() => playerConfigStore.bfPeakingGain, (newVal) => {
		$audio.bfPeakingNode.gain.value = newVal;
	})
	
	watch(() => playerConfigStore.bfPeakingQ, (newVal) => {
		$audio.bfPeakingNode.Q.value = newVal;
	})
	
	watch(() => playerConfigStore.panner2D, (newVal) => {
		$audio.panner2DNode.pan.value = newVal;
	})
	
	watch(() => playerConfigStore.panner3DX, (newVal) => {
		$audio.panner3DNode.positionX.value = newVal;
	})
	
	watch(() => playerConfigStore.panner3DY, (newVal) => {
		$audio.panner3DNode.positionY.value = newVal;
	})
	
	watch(() => playerConfigStore.panner3DZ, (newVal) => {
		$audio.panner3DNode.positionZ.value = newVal;
	})
	
	watch(() => playerConfigStore.pannerMode, (newVal) => {
		if (newVal === '2D') {
			$audio.panner3DNode.disconnect();
			$audio.panner2DNode.connect($audio.analyserNode);
		} else {
			$audio.panner2DNode.disconnect();
			$audio.panner3DNode.connect($audio.analyserNode);
		}
	})
	
</script>

<style lang="scss" scoped>
	
	.acf-player-cfg {
		:deep(.el-form-item__label),
		:deep(.el-radio) {
			color: #fff;
		}
		:deep(.el-form-item) {
			margin-bottom: 10px;
		}
	}
	
</style>